import React, { FC, forwardRef, useImperativeHandle, useRef } from 'react'
import ReactEcharts from 'echarts-for-react'


interface Props {
  option: object;
  style?: object;
  ref?: any;
}
let yAxisCommon = {
  nameTextStyle: {
    color: '#b9b9b9'

  },
  axisLine: {
    lineStyle: {
      color: '#b9b9b9',
      width: 0
    }
  },
  axisTick: false,
  splitLine: {
    show: true,
    interval: 'auto',
    lineStyle: {
      color: ['rgba(163,205,255,.1)']
    }
  }
}
let xAxisCommon = {
  nameTextStyle: {
    color: 'rgba(163,205,255,.1)'
  },
  scale: true,
  axisLine: {
    lineStyle: {
      color: '#b9b9b9',
      width: 1
    },
    textStyle: {
      color: 'rgba(163,205,255,1)'
    }
  },
  axisLabel: {
    textStyle: {
      color: '#fff'
    }
  },
}
const MyEcharts = ({
  option = {},
  style = {},
  ref = null,
}, refs) => {
  //设置图表 X和Y轴字体分割线字体颜色
  let echarts_react = useRef();
  let yAxis = option['yAxis'];
  let xAxis = option['xAxis'];
  if (Object.prototype.toString.call(yAxis) === "[object Array]") {
    yAxis.map((e, i) => {
      yAxis[i] = {
        ...yAxisCommon,
        ...e,
      }
      return 1
    })
  }
  if (Object.prototype.toString.call(yAxis) === "[object Object]") {
    yAxis = {
      ...yAxisCommon,
      ...yAxis
    }
  }
  if (Object.prototype.toString.call(xAxis) === "[object Array]") {
    xAxis.map((e, i) => {
      xAxis[i] = {

        ...xAxisCommon,
        ...e
      }
      return 1
    })
  }
  if (Object.prototype.toString.call(xAxis) === "[object Object]") {
    xAxis = {
      ...xAxisCommon,
      ...xAxis
    }
  }

  const options = {

    color: ['#2B81FF', '#F6BD16', '#FF7400', '#FFE765', '#00F298'],
    grid: {
      left: '8%',
      right: '8%',
      top: '5%',
      bottom: '8%'
    },
    yAxis: yAxis,
    xAxis: xAxis,
    legend: {
      color: '#fff'
    },
    ...option,
  }
  useImperativeHandle(refs, () => ({
    callback: (fn) => {
      fn(echarts_react)
    },
  }));
  return <ReactEcharts option={options} ref={(e) => { echarts_react = e?.getEchartsInstance(); }} style={style} />
}

const MyEchartsCom = forwardRef(MyEcharts);
export default MyEchartsCom
